<template>
  <div class="search-result">
    <div class="filter-section">
      <el-card>
        <!-- 搜索结果展示 -->
        <div class="result-section" v-if="productData.length > 0">
          <el-card>
            <el-row :gutter="40">
              <el-col :span="6" :xs="24" :sm="12" :md="8" :lg="6" v-for="product in productData" :key="product.id" @click="viewDetail(product.id)">
                <el-card :body-style="{ padding: '0px' }" class="product-card">
                  <img :src="product.image" class="product-image">
                  <div class="product-info">
                    <h3 class="product-title" v-html="product.title"></h3>
                    <div class="product-price">
                      <span class="price">¥{{ product.price }}</span>
                    </div>
                    <div class="product-footer">
                      <span class="sales">销量 {{ product.salesVolume }}</span>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>

            <div class="load-more" v-if="hasMore">
              <el-button text @click="loadMore">加载更多</el-button>
            </div>
          </el-card>
        </div>
        <div class="no-result" v-else>
          <el-empty description="暂无搜索结果" :image-size="200"></el-empty>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { useRoute } from "vue-router";
import { computed, onMounted, ref, watch } from "vue";
import { searchApi } from "@/api/ProductApi";
import router from "@/router";

export default {
  name: 'SearchResultPage',
  methods: {},
  setup() {
    const route = useRoute();
    const keyword = computed(() => route.query.keyword || '');
    const productData = ref([]);
    const currentPage = ref(1);
    const pageSize = 20;

    onMounted(async () => {
      await fetchProducts(currentPage.value);
    });

    async function fetchProducts(page) {
      try {
        const res = await searchApi(keyword.value, page, pageSize);
        console.log("发送请求");

        if (res.data.code == 1) {
          console.log(res.data.data.records);
          productData.value = res.data.data.records
        }
      } catch (error) {
        console.error('Failed to fetch products:', error);
      }
    }
    // 查看商品详情
    const viewDetail = (id) => {
      router.push(`/product/${id}`);
    };
    // 监听筛选条件变化并重新获取数据
    watch(keyword, () => {
      productData.value = [];
      currentPage.value = 1;
      console.log("keyword变化");
      fetchProducts(currentPage.value);
    });

    return {
      keyword,
      productData,
      currentPage,
      viewDetail,
      pageSize,
      loadMore: () => {
        currentPage.value++;
        fetchProducts(currentPage.value);
      },

    };
  }
}
</script>

<style scoped>
.result-section{
  width:1400px;
}
.search-result {
  grid-template-columns: 250px 1fr;
  gap: 40px; /* 增大间距 */
  padding: 40px;
}

.filter-section {
  position: sticky;
  top: 40px; /* 调整粘性定位的顶部距离 */
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-card {
  margin-bottom: 40px; /* 增加卡片底部间距 */
  transition: all 0.3s;
  width: 100%;
}

.product-card:hover {
  transform: translateY(-10px); /* 增大悬停时的位移 */
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);
}

.product-image {
  width: 100%;
  height: 300px; /* 增大图片高度 */
  object-fit: cover;
}

.product-info {
  padding: 20px; /* 增大内边距 */
}

.product-title {
  font-size: 18px; /* 增大标题字体 */
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-price {
  margin: 16px 0; /* 增大价格与上下内容的间距 */
}

.price {
  color: #ff6b6b;
  font-size: 24px; /* 增大价格字体 */
  font-weight: bold;
  margin-right: 16px; /* 增大价格与其他信息的间距 */
}

.original-price {
  color: #999;
  text-decoration: line-through;
  font-size: 16px; /* 增大原价字体 */
}

.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sales {
  color: #999;
  font-size: 14px;
}

.load-more {
  text-align: center;
  margin-top: 40px; /* 增加载入更多按钮的顶部间距 */
}

@media (max-width: 768px) {
  .search-result {
    grid-template-columns: 1fr;
  }

  .filter-section {
    position: static;
  }
}
</style>
